<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="/layui/css/layui.css">
    <link  href="/hg-layui-admin-ui/css/font.css">
    <script src="/js/jquery-1.8.3.min.js"></script>
    <script src="/layui/layui.js"></script>


    <style>

        .layui-table-cell{
            display:table-cell;
            vertical-align: middle;
            height:auto;
            overflow:visible;
            text-overflow:inherit;
            white-space:normal;
        }
    </style>
</head>

<body class="layui-body-content">
<div class="layui-fluid">
    <form class="layui-form" id="cxform" action="" style="margin: 2% 0% 0% 0%;">
        <div class="layui-colla-item" style="margin-left: 2%">
            <div class="layui-inline">
                <label class="layui-form-label" style="margin-left: -50px"><span >课程名称</span></label>
                <div  class="layui-input-inline" style="width: 350px;">
                    <input type="text" id="ktmc" name="ktmc" class="layui-input" placeholder="课程名称" >
                </div>
            </div>

            <div class="layui-input-inline" style="margin-left:50px;">
                <button class="layui-btn layui-btn-normal layui-bg-green layui-btn-sm" id="cxbtn" type="button" lay-submit="" lay-filter="cxbtn">查询</button>
                <button class="layui-btn layui-btn-normal layui-btn-sm" id="xzbtn" type="button" lay-submit="" lay-filter="xzbtn">新增</button>
            </div>
        </div>

        <table style="border: 1px solid red" class="layui-hide" id="test" lay-filter="test"></table>

    </form>
    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <div id="addyhdiv" style="display: none;border-radius: 6px">
        <form class="layui-form" id="formqrmain" action="" style="margin-top: 50px;margin-left:4%;">

            <input type="hidden" id="id"  name="id">

            <!-- 新增  -->
            <div class="layui-form-item" >
                <label class="layui-form-label" style="width: 92px;"><span  >课程名称</span><span style="color: red">*</span></label>
                <div class="layui-input-inline" >
                    <input type="text" id="ktmcs"  style="width: 250px;" name="ktmcs"   placeholder="课程名称" class="layui-input qyzzlname" >
                </div>
                <label class="layui-form-label" style="width: 155px;"><span  >课程类型</span><span style="color: red">*</span></label>
                <div class="layui-input-inline"  >
                    <select  id="ktlx"  name="ktlx" style="width: 250px;">
                        <option value="">请选择类型</option>
                        <option value="必修课">必修课</option>
                        <option value="限选课">限选课</option>
                        <option value="任选课">任选课</option>
                        <option value="公选课">公选课</option>
                    </select>
                </div>

            </div>

            <div class="layui-form-item" style="margin-top: 35px;" >
                <label class="layui-form-label" style="width: 92px;"><span>课程分值</span><span style="color: red">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" id="ktfz" name="ktfz"  style="width: 250px;" placeholder="课堂分值" class="layui-input qyzzlname" >
                </div>

            </div>


        </form>
    </div>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button  type="button" class="layui-btn layui-btn-sm layui-bg-red" lay-event="getCheckData">批量删除</button>
        </div>
    </script>
</div>
</body>
<script>



    $(function() {
        getAllInfo();
    });

    $("#cxbtn").click(function(){
        getAllInfo();
    });

    function getAllInfo(){
        var ktmc =  $("#ktmc").val();
        $.ajax({
            type: "POST",
            url: "getAllKtinfo",
            data:{ktmc:ktmc},
            dataType: "json",
            success: function (data) {
                layui.use('table', function(){
                    var table = layui.table;
                    table.render({
                        elem: '#test',
                        data:data.rows,
                        height:518,
                        toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                        ,defaultToolbar: ['', '', '', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                            title: '提示'
                            ,layEvent: 'LAYTABLE_TIPS'
                            ,icon: 'layui-icon-tips'
                        }],
                        cols: [
                            [
                                {type:'checkbox'}
                                ,{field:'id', width:180, title: 'ID', hide:true ,sort: true}
                                ,{field:'ktmc', width:300, title: '课程名称', sort: true}
                                ,{field:'ktlx', width:800, title: '课程类型', sort: true}
                                ,{field:'ktfz', width:230,title: '课程分值', sort: true}
                                ,{fixed: 'right', width:260, align:'center', toolbar: '#bar'}
                            ]
                        ]
                        ,page: true
                    });

                });


            },
            error: function (data, type, err) {
                console.log("ajax错误类型：" + type);
                console.log(err);
                layer.msg('删除失败！');
            }
        });
    }





    layui.use(['table','form','laydate'], function() {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#fbrq' //指定元素
        });
        /*新增学生*/
        form.on('submit(xzbtn)',function () {
            var addlayer = layer.open({
                type : 1,
                title : "新增课堂信息",
                btn:['确定','取消'],
                area : [ '865px', '500px' ],
                offset:'10%',
                shadeClose : false, //点击遮罩关闭
                content : $('#addyhdiv'),
                success : function() {
                    document.getElementById("formqrmain").reset();
                    $("#ktlx").val("");
                    layui.form.render();
                    return;
                },
                yes:function(index,layero){
                    var ktmc = $("#ktmcs").val();
                    var ktlx = $("#ktlx").val();
                    var ktfz = $("#ktfz").val();

                    if(ktmc == null || ktmc == ""){
                        layer.msg("课堂名称不能为空！");
                        return;
                    }
                    if(ktlx == null || ktlx == ""){
                        layer.msg("课堂类型不能为空！");
                        return;
                    }
                    if(ktfz == null || ktfz == ""){
                        layer.msg("课堂分值不能为空！");
                        return;
                    }

                    if(ktfz==0||ktfz>6){
                        layer.msg("课堂分值为1-6分！");
                        return;
                    }
                    console.log("打印值");
                    var ktinfo ={
                        ktmc : ktmc,
                        ktlx : ktlx,
                        ktfz : ktfz
                    };
                    console.log(ktinfo);
                    $.ajax({
                        type:"POST",
                        url:"add",
                        data:ktinfo,
                        success:function (data) {
                            layer.msg("增加成功");
                            layer.close(addlayer);
                            getAllInfo();
                        },
                        error: function (data,type, err) {
                            console.log("ajax错误类型："+type);
                            console.log(err);

                            layer.alert("增加失败", {
                                    icon: 6
                                },
                                function () {
                                });
                        }
                    });

                },
                cancel : function() {
                    return;
                },
                end : function() {
                    //$('#main').css("display", "none");
                }
            });


        })


        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            if(data.length==0){
                layer.msg("请选择数据！");
                return false;
            }
            layer.confirm('是否批量删除',{
                title:"提示信息"
            }, function(index) {
                var str ="";

                for (let i = 0; i <data.length ; i++) {
                    if(i==data.length-1){
                        str += " '"+data[i].id+"' ";
                    }else{
                        str += " '"+data[i].id+"', ";
                    }
                }
                console.log(str);
                $.ajax({
                    type:"POST",
                    url:"deletes",
                    data:{"ids":str},
                    dataType:"json",
                    success:function (data) {
                        if(data === true){//删除成功：移除删除行
                            layer.msg('提示：删除成功！');
                            getAllInfo();
                        }else{//删除失败
                            layer.msg('提示：删除失败！');
                        };
                    },
                    error: function (data,type, err) {
                        console.log("ajax错误类型："+type);
                        console.log(err);
                        hg.msg('删除失败！');
                    }
                });

                layer.close(index);
            });

            return false;
        });



        table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event;
            if(layEvent === 'edit'){

                var addlayer = layer.open({
                    type : 1,
                    title : "编辑课堂信息",
                    btn:['确定','取消'],
                    area : [ '865px', '500px' ],
                    offset:'10%',
                    shadeClose : false, //点击遮罩关闭
                    content : $('#addyhdiv'),
                    success : function() {
                        $("#ktmcs").val(data.ktmc);
                       // $("#ktlx").val(data.ktlx);
                        $("#ktlx option[value='"+data.ktlx+"']").attr("selected","selected");
                        $("#ktlx").val(data.ktlx);
                        $("#ktfz").val(data.ktfz);
                        $("#id").val(data.id);
                        layui.form.render();
                        return;
                    },
                    yes:function(index,layero){
                        var id = $("#id").val();
                        var ktmc = $("#ktmcs").val();
                        var ktlx = $("#ktlx").val();
                        var ktfz = $("#ktfz").val();

                        if(ktmc == null || ktmc == ""){
                            layer.msg("课堂名称不能为空！");
                            return;
                        }
                        if(ktlx == null || ktlx == ""){
                            layer.msg("课堂类型不能为空！");
                            return;
                        }
                        if(ktfz == null || ktfz == ""){
                            layer.msg("课堂分值不能为空！");
                            return;
                        }

                        if(ktfz==0||ktfz>6){
                            layer.msg("课堂分值为1-6分！");
                            return;
                        }
                        console.log("打印值");
                        var ktinfo ={
                            id,id,
                            ktmc : ktmc,
                            ktlx : ktlx,
                            ktfz : ktfz
                        };
                        console.log(ktinfo);
                        $.ajax({
                            type:"POST",
                            url:"edit",
                            data:ktinfo,
                            success:function (data) {
                                layer.msg("修改成功");
                                layer.close(addlayer);
                                getAllInfo();
                            },
                            error: function (data,type, err) {
                                console.log("ajax错误类型："+type);
                                console.log(err);

                                layer.alert("修改失败", {
                                        icon: 6
                                    },
                                    function () {
                                    });
                            }
                        });

                    },
                    cancel : function() {
                        return;
                    },
                    end : function() {
                        //$('#main').css("display", "none");
                    }
                });
            }else if(layEvent === 'del'){
                layer.confirm('是否删除',{
                    title:"提示信息"
                }, function(index) {
                    $.ajax({
                        type:"POST",
                        url:"delete",
                        data:{"id":data.id},
                        dataType:"json",
                        success:function (data) {
                            if(data === true){//删除成功：移除删除行
                                layer.msg('提示：删除成功！');
                                getAllInfo();
                            }else{//删除失败
                                layer.msg('提示：删除失败！');
                            };
                        },
                        error: function (data,type, err) {
                            console.log("ajax错误类型："+type);
                            console.log(err);
                            hg.msg('删除失败！');
                        }
                    });

                    layer.close(index);
                });

            }



        })

    })




</script>

</html>